<template>
  <div class="carrier-box">
    <div class="map-box">
      <div class="chart" ref="chartMap"></div>
      <div class="clear-btn" v-if="district" @click="clearMapActive">还 原</div>
    </div>
    <div class="list_search ">
      <div class="huan">
        <div class="huan-title">
          <img src="~@img/atlas/icon-donut.png" alt="" />
          <span v-show="district != ''"
            >机构类型分布统计图 --- {{ district }}</span
          >
          <span v-show="district == ''">机构类型分布统计图</span>
        </div>
        <div class="chart" ref="chartHuan"></div>
      </div>
      <div class="total-search">
        <div class="total">
          共为您查找到 <span>{{ total }}</span> 家机构
        </div>
        <div class="search">
          机构类型：
          <el-select
            class="left-select"
            v-model="activeFirst"
            placeholder="请选择"
            @change="changeOptions"
          >
            <el-option
              v-for="item in classOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select
            v-show="activeFirst != '2'"
            v-model="activeSecond"
            placeholder="请选择"
            @change="changeSecond"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div
            v-show="activeFirst == '2'"
            style="display:inline-block;width:140px"
          ></div>
        </div>
      </div>
      <!-- height="289" -->

      <el-table
        :data="listInfo"
        ref="multipleTable"
        border
        stripe
        tooltip-effect="light"
        height="300"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        style="max-width: 632px;"
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            <div>
              {{ (page - 1) * per_page + scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="机构名称">
          <template slot-scope="scope">
            <div @click="goDetail(scope.row)" style="cursor:pointer">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cate" label="机构类型"> </el-table-column>
      </el-table>
      <el-pagination
        v-if="total != 0"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  innovateOrgs,
  distribute,
  orgsSdMap,
  apiInnovateOrgs,
} from "@api/atlas";
import ty from "@map/ty.json";
export default {
  data() {
    return {
      chartMap: null,
      chartHuan: null,
      // 地图选择区域
      district: "",
      // 选中第一层级
      activeFirst: 1,
      // 选中第二层级
      activeSecond: "",
      // 第一层级筛选项
      classOption: [],
      // 第二层级筛选项
      options: [],
      college: [],
      creative: [],
      induserve: [],
      scenice: [],
      // 数据列表
      listInfo: [],
      mapData: [],
      huanData: [],
      page: 1,
      per_page: 5,
      total: 0,
    };
  },
  // "once",
  props: ["industry_id", "industry_cate"],
  watch: {
    // once(nv, ov) {
    //   if (nv == true) {
    //     this.$nextTick(() => {
    //       this.initChartMap();
    //       this.initChartHuan();
    //       this.upDataHuan(this.huanData);
    //       this.upChartMap(this.mapData);
    //     });
    //   }
    // },
    industry_id(nv, ov) {
      if (nv != ov) {
        this.clearSelect();
        this.district = "";
        this.activeFirst = 1;
        this.activeSecond = "";
        this.page = 1;
        this.getDistribute();
        this.getOrgsSdMap();
        this.getApiInnovateOrgs();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getOrgs();
      this.getDistribute();
      this.getOrgsSdMap();
      this.getApiInnovateOrgs();

      this.initChartMap();
      this.initChartHuan();
      this.upDataHuan(this.huanData);
      this.upChartMap(this.mapData);
    });
  },
  methods: {
    async getOrgsSdMap() {
      let res = await orgsSdMap({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
        cateone: this.activeFirst,
        catetwo: this.activeSecond,
        page: this.page,
        perpage: this.per_page,
        product: "",
      });
      if (res.code && res.code != 0) {
        if (this.chartMap) {
          this.upChartMap([]);
        }
      } else {
        let data = [];
        res.map((item) => {
          data.push({
            id: item.id,
            name: item.name,
            value: [item.jwd.lng, item.jwd.lat, 200],
          });
        });
        this.mapData = data;
        if (this.chartMap) {
          this.upChartMap(data);
        }
      }
    },
    async getApiInnovateOrgs() {
      let res = await apiInnovateOrgs({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
        cateone: this.activeFirst,
        catetwo: this.activeSecond,
        page: this.page,
        perpage: this.per_page,
        product: "",
      });
      if (res.code && res.code != 0) {
        this.listInfo = [];
        this.total = 0;
      } else {
        this.listInfo = this.listInfo = res.df.map((item, index) => {
          return { ...item, index: index + 1 };
        });
        this.total = res.size;
      }
    },
    async getDistribute() {
      let res = await distribute({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
        district: this.district,
      });
      if (res.code && res.code != 0) {
      } else {
        this.huanData = res.map((item) => {
          return { name: item.label, value: item.value };
        });
        if (this.chartHuan) {
          this.upDataHuan(this.huanData);
        }
      }
    },
    async getOrgs() {
      let res = await innovateOrgs();
      if (res.code && res.code != 0) {
      } else {
        this.classOption = res.options.class;
        this.college = res.options.college;
        this.creative = res.options.creative;
        this.induserve = res.options.induserve;
        this.scenice = res.options.scenice;
        this.options = res.options.college;
      }
    },
    goDetail(info) {
      if (info.cateone == 1) {
        this.$router.push({
          name: "school",
          params: { id: info.id, activeMenu: "atlas", type: "1" },
        });
      } else if (info.cateone == 2) {
        this.$router.push({
          name: "institution",
          params: { id: info.id, activeMenu: "atlas", type: "2" },
        });
      } else if (info.cateone == 3) {
        this.$router.push({
          name: "institution",
          params: { id: info.id, activeMenu: "atlas", type: "3" },
        });
      } else if (info.cateone == 4) {
        this.$router.push({
          name: "institution",
          params: { id: info.id, activeMenu: "atlas", type: "4" },
        });
      }
    },
    changeOptions(newValue) {
      this.activeSecond = "";
      if (newValue == 1) {
        this.options = this.college;
      } else if (newValue == 2) {
        this.options = this.scenice;
      } else if (newValue == 3) {
        this.options = this.creative;
      } else if (newValue == 4) {
        this.options = this.induserve;
      } else {
        this.options = [];
      }
      this.page = 1;
      this.getOrgsSdMap();
      this.getApiInnovateOrgs();
    },
    clearMapActive() {
      this.district = "";
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "开发区",
      });
      this.getDistribute();
    },
    clearSelect() {
      if (this.chartMap) {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
      }
    },
    changeSecond(newV) {
      this.page = 1;

      this.getOrgsSdMap();
      this.getApiInnovateOrgs();
    },
    initChartMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "#fff",
            formatter: function(params) {
              //标签内容
              return params.name;
            },
            fontSize: 12,
            position: "insideBottom",
          },
          itemStyle: {
            areaColor: "#2953a8",
            borderColor: "#2168be",
            borderWidth: 2,
          },
          select: {
            itemStyle: {
              areaColor: "#2c90e5",
              color: "#2c90e5",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff",
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            itemStyle: {
              areaColor: "#2c90e5",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            data: [
              { name: "小店区" },
              { name: "迎泽区" },
              { name: "杏花岭区" },
              { name: "万柏林区" },
              { name: "尖草坪区" },
              { name: "晋源区" },
              { name: "古交市" },
              { name: "清徐县" },
              { name: "阳曲县" },
              { name: "娄烦县" },
            ],
            select: {
              itemStyle: {
                areaColor: "#fff",
                color: "#fff",
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 0,
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          {
            name: "开发区",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              // {
              //   name: "晋城经济技术开发区",
              //   value: [112.555016, 37.602938, 200],
              // },
            ],
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            // hoverAnimation: true,
            label: {
              show: false,
              // formatter: "  {b}",
              position: "right",
              color: "#444",
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "#ffff00",
              },
              label: {
                show: true,
                position: "top",

                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                backgroundColor: "#e7f4ff",
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "#ffff00",
              shadowBlur: 10,
              shadowColor: "#ffff00",
            },
            emphasis: {
              label: {
                show: true,
                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                position: "top",

                backgroundColor: "#e7f4ff",
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "#ffff00",
                shadowBlur: 10,
                shadowColor: "#ffff00",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        if (item.name == this.district) {
          return;
        }

        this.clearSelect();
        if (item.componentSubType == "effectScatter") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.district = item.name;
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
          this.getDistribute();
          this.$message({
            message: "成功切换至" + item.name + "机构类型分布统计图",
            type: "success",
          });
        }
      });
      this.chartMap.on("dblclick", (item) => {
        if (item.name == this.district) {
          return;
        }
        this.district = item.name;
        this.clearSelect();
        if (item.componentSubType == "effectScatter") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
        }
        this.getDistribute();
        this.$message({
          message: "成功切换至" + item.name + "机构类型分布统计图",
          type: "success",
        });
      });
    },
    upChartMap(data) {
      let options = {
        series: [
          {},
          {
            data: data,
          },
        ],
      };
      this.chartMap.setOption(options);
    },
    initChartHuan() {
      this.chartHuan = this.$echarts.init(this.$refs.chartHuan);
      const initOption = {
        color: [
          "#fb3878",
          "#fdbe24",
          "#f4954f",
          "#462af6",
          "#b33ecc",
          "#25bd97",
          "#37a2da",
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "10%",
          right: "10%",
          icon:
            "path://M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z",
          orient: "vertical",
          align: "auto",
          itemGap: 24,
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                verticalAlign: "top",
                align: "center",
              },
            },
            color: "#333",
            fontSize: 14,
          },
          data: ["高等院校", "科研机构", "创新平台", "产业服务平台"],
        },
        series: [
          {
            type: "pie",
            center: ["30%", "45%"],
            radius: ["30%", "75%"],
            labelLine: {
              show: true,
              length: 0,
              length2: 60,
              smooth: false,
              showAbove: true,
              lineStyle: { cap: "round" },
            },
            label: {
              formatter: "{a|{d}%}\n{hr|}",
              // position: "outside",
              //折线图文字颜色
              color: "#fffdef",
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-40, -50, -50, -50],

                  fontSize: 14,
                  fontWeight: 600,
                },
              },
              color: "#fff",
            },
            selectedMode: "single",
          },
        ],
      };
      this.chartHuan.setOption(initOption);
      this.chartHuan.on("legendselectchanged", function(obj) {
        const { selected, name } = obj;
        selected[name] = true;
        let option = {
          legend: {
            selected: selected,
          },
        };
        this.setOption(option);
        this.chartHuan.dispatchAction({
          type: "select",
          name: name,
        });
      });
    },
    upDataHuan(data) {
      let option = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartHuan.setOption(option);
    },
    handleCurrentChange(value) {
      this.page = value;
      this.getOrgsSdMap();
      this.getApiInnovateOrgs();
    },
  },
};
</script>
<style lang="less" scoped>
.carrier-box {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  .map-box {
    position: relative;

    flex: 0 0 820px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
  .list_search {
    position: relative;
    margin-left: 30px;
    height: 100%;
    flex: 1;
    .el-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
.chart {
  width: 100%;
  height: 100%;
}
.list_search {
  .huan {
    padding: 20px;
    height: 270px;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
}
.huan-title {
  img,
  span {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    height: 18px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}

/deep/ .el-pagination {
  margin-top: 10px !important;
}
.total-search {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .left-select {
    margin-right: 20px;
  }
  .total {
    font-size: 16px;
    font-family: Microsoft YaHei;
    line-height: 32px;
    font-weight: bold;
    color: #333333;
    span {
      color: #446db3;
    }
  }
  .search {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
/deep/ .el-select,
/deep/ .el-select .el-input__inner {
  width: 140px;
  height: 32px;
  line-height: 32px;
  background: #ffffff;
  border-radius: 5px;
}

/deep/ .el-input__icon {
  line-height: 32px;
}
.clear-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #5889dc;
  border-radius: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  z-index: 99;
  cursor: default;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  // .total-search {
  //   flex-direction: column;
  // }
  .carrier-box .map-box {
    flex: 0 0 630px;
  }
  /deep/ .el-table .el-table__cell .cell {
    height: 40px;
    line-height: 40px;
  }
  .total-search {
    margin: 12px 0;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .carrier-box .map-box {
    flex: 0 0 530px;
  }
  .total-search .total {
    font-size: 13px;
  }
  .total-search .search {
    font-size: 13px;
  }
  /deep/ .el-table {
    max-width: 530px;
    height: 190px !important;
  }
  .total-search .total {
    font-size: 12px;
  }
  .carrier-box .list_search .el-pagination {
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
  }

}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .total-search {
    margin: 10px 0;
    flex-direction: column;
  }
  .carrier-box .list_search .el-pagination {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    max-width: 480px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table {
    max-width: 530px;
    height: 296px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .carrier-box .map-box {
    flex: 0 0 300px;
  }
  .el-table {
    max-width: 650px;
    height: 196px !important;
  }
  .total-search {
    margin: 6px 0;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .carrier-box {
    flex-direction: column;
    overflow-y: auto;
  }
  .total-search {
    flex-direction: row;
  }
  .carrier-box .list_search {
    margin: 20px 0 0;
  }
  .carrier-box .map-box {
    flex: 0 0 400px;
  }
  .el-table {
    max-width: 650px;
    height: 296px !important;
  }
  .carrier-box .list_search .el-pagination {
    max-width: 650px;
    position: relative;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
  }
}
</style>
